import { ref } from "vue";

const option = ref({}) as any;

function initOptions(): any {
  return {
    // 数据颜色
    color: ["#1890FF", "#ffc370"],
    // 内边距-矫正父组件布局
    padding: [0, 20, 20, 0],
    // 是否显示折线图每个节点数据
    dataLabel: false,
    // 是否在每个节点-显示节点
    dataPointShape: false,
    // 是否开启滚动条-配合x轴itemCount出现x轴滚动条
    enableScroll: false,
    // 图例配置
    legend: {
      // 把图例放在图表上方
      position: "top",
    },
    // x轴配置
    xAxis: {
      disabled: false,
      axisLine: true, // 显示 X 轴线
      // 单位
      title: "月",
      // 单位横移偏移量
      titleOffsetX: "0",
      // 不绘制纵向网格
      disableGrid: true,
    },
    // y轴配置
    yAxis: {
      showAxisLine: false, // 不绘制y轴 轴线
      axisLine: false, // 隐藏 Y 轴轴线
      // 虚线-实线
      gridType: "dash",
      // 虚线单位
      dashLength: 4,
      // 开启y轴单位
      showTitle: true,
      // y轴配置
      data: [
        {
          // 不写最大最小值-自增长
          // min: 0,
          // max: 150,
          // y轴单位
          title: "数量",
        },
      ],
    },
    extra: {
      line: {
        // 曲线圆滑模式
        type: "curve",
        // 折线的宽度
        width: 2,
        // 点击弹出框时，节点样式
        activeType: "hollow",
        // 自定义渐变色
        linearType: "custom",
        // 开启阴影
        onShadow: true,
        // 水平动画
        animation: "horizontal",
      },
    },
  };
}

function initData(xdata: any[] = [], data1: any = [], data2: any = []): any {
  return {
    // x轴数据
    categories: xdata,
    // 表格数据 - 一个对象就是一个数据
    series: [
      {
        // 数据名
        name: data1.name,
        // 数据渐变
        linearColor: [
          [0, "#1890FF"],
          [0.25, "#00B5FF"],
          [0.5, "#00D1ED"],
          [0.75, "#00E6BB"],
          [1, "#90F489"],
        ],
        // 阴影部分
        setShadow: [3, 8, 10, "#1890FF"],
        // 数据量
        data: data1.data,
      },

      {
        name: data2.name,
        linearColor: [
          [0, "#FAC858"],
          [0.33, "#FFC371"],
          [0.66, "#FFC2B2"],
          [1, "#FA7D8D"],
        ],
        setShadow: [3, 8, 10, "#FC8452"],
        data: data2.data,
      },
    ],
  };
}

/* 
let ddd = {
  xdata: ["2018", "2019", "2020", "2021", "2022", "2023"],
  series: [
    {
      name: "电话",
      data: [15, 45, 15, 45, 15, 45],
    },
    {
      name: "短信",
      data: [95, 125, 95, 125, 95, 125],
    },
  ],
};
*/

function setOptions(res: any = []) {
  let xdata: any = [];
  let series: any = [
    {
      name: '收入',
      data: []
  }, {
    name: '支出',
    data: []
  }]

  res.forEach(_s => {
    xdata.push(_s.key);
    series[0].data.push(_s.value.in);
    series[1].data.push(_s.value.out);
  });

  console.log(res);

  const opts: any = initOptions();
  const data: any = initData(xdata, series[0], series[1]);

  option.value = { opts, data };
}

export default function useOption(): any[] {
  return [option, setOptions];
}
